import React from "react";

import { connect } from 'react-redux'

class AddTodo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      input: "" 
    };
  }

  updateInput = input => {
    this.setState({ input });
  };

  handleAddTodo = () => {

    let todo = {
      id:Math.random(),
      content:this.state.input,
      completed:false
    }


    // this.$store.dispatch({
    //   type:'add',
    //   payload:todo
    // })

    this.props.addTodo(todo)

    this.setState({ input: "" });
  };

  render() {
    return (
      <div>
        <input
          onChange={e => this.updateInput(e.target.value)}
          value={this.state.input}
        />
        <button className="add-todo" onClick={this.handleAddTodo}>
          Add Todo
        </button>
      </div>
    );
  }
}

// export default AddTodo;


// 将action映射成为一个函数
// 使用react-redux中的额connect函数将当前组件重新包装，在包装的过程中可以实现
// state和action到props的映射

// connect提供两个参数
// 第一个参数是一个函数，用于映射state数据的，讲state数据映射成为当前组件的props属性
// 第二个参数是一个对象或者函数，用于将action映射成为一个方法，这个方法会挂载到props里面

export default connect(null,{
  addTodo:(todo)=>{
    return {
      type:'add',
      payload:todo
    }
  }
})(AddTodo)
